<template>
	<view class="login">
		<view class="container">
			<!--顶部返回按钮-->
			<text class="back-btn iconfont iconzuo" @tap="navBack"></text>
			<!--插画-->
			<view class="right-top-sign"></view>
			<view class="wrapper">
				<view class="left-top-sign">LOGIN</view>
				<view class="welcome">
					登录！
				</view>
				<view class="input-content">
					<view class="input-item" v-if="loginByPass">
						<text class="tit">企业编号</text>
						<input
							v-model="tenantId"
							placeholder="请输入企业编号"
							maxlength="20"
						/>
					</view>
					<view class="input-item" v-if="loginByPass">
						<text class="tit">企业名称</text>
						杭州毕博科技
					</view>

					<view class="input-item" v-if="!loginByPass">
						<text class="tit">手机号码</text>
						<button class="getPhoneNumber" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true">
							<text v-if="form.mobile">{{form.mobile}}</text>
							<text v-else class="placeholder">请使用常用号码</text>
						</button>
					</view>

					<view class="input-item input-item-sms-code" v-if="!loginByPass">
						<view class="input-wrapper">
							<view class="oa-input-wrapper">
								<view class="tit">验证码</view>
								<input type="number" v-model="form.code" placeholder="请输入验证码"
								placeholder-style="color: #999;font-size: 30rpx;" maxlength="4" data-key="mobile" />
							</view>
							<button class="sms-code-btn" :disabled="smsCodeBtnDisabled" @tap.stop="getSmsCode">
								<text v-if="!smsCodeBtnDisabled">获取验证码</text>
								<text v-else class="sms-code-resend">{{`重新发送 (${codeSeconds})`}}</text>
							</button>
						</view>
					</view>
					<button class="confirm-btn" :class="'bg-' + themeColor.name" @tap="toBind" v-if="loginByPass">
						登录
					</button>
					<button class="confirm-btn" :class="'bg-' + themeColor.name" v-if="!loginByPass"
						:disabled="btnLoading" :loading="btnLoading" @tap="toLogin">
						绑定
					</button>
				</view>
			</view>

			<view class="register-section">
				<!-- <text @tap="navTo('/pages/account/password')">账号登录</text> -->
				<text @tap="toHome">返回主页</text>
			</view>
		</view>
	</view>
</template>
<script>
	import moment from '@/common/moment';
	import {fetchList} from '@/api/admin/tenant'
	import {loginBySocial, staffPhone, loginByMobile, socialBind, getPhone} from '@/api/login'

	export default {
		data() {
			return {
				smsCodeBtnDisabled: false,
				codeSeconds: 0, // 验证码发送时间间隔
				form: {
					mobile: '',
					code: '',
				},
				btnLoading: false,
				loginByPass: true,
				tenantId: '',
				tenantList: []
			};
		},
		onLoad() {
			const time = moment().valueOf() / 1000 - uni.getStorageSync('loginSmsCodeTime');
			if (time < 60) {
				this.codeSeconds = this.$mConstDataConfig.sendCodeTime - parseInt(time, 10);
				this.handleSmsCodeTime(this.codeSeconds);
			} else {
				this.codeSeconds = this.$mConstDataConfig.sendCodeTime;
				this.smsCodeBtnDisabled = false;
				uni.removeStorageSync('loginSmsCodeTime');
			}
			this.get()
			let TENANT_ID = uni.getStorageSync('tenantId')
			if(TENANT_ID){
				// #ifdef MP-WEIXIN
				this.initWeixinData()
				// #endif
			}
		},
		methods: {
			get(){
				fetchList().then(res => {
					this.tenantList = res.data
				})
			},
			getPhoneNumber(e) {
				// encryptedData   包括敏感数据在内的完整用户信息的加密数据
				// errMsg    "getPhoneNumber:ok"
				// iv 加密算法的初始向量
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					// 用户点击允许
					getPhone(e.detail.code).then(res => {
						this.form.mobile = res.data.phone_info.phoneNumber
					})
				} else {
					// 用户点击拒绝
				}
			},
			// 绑定
			toBind() {
				if (this.tenantId === '') {
					return this.$mHelper.toast('请输入企业编号!');
				}
				let bol = false
				let code = ''
				this.tenantList.forEach((item, i) => {
					if(this.tenantId === item.code || this.tenantId === item.name || parseInt(this.tenantId) === item.code) {
						bol = true
						code = item.id
					}
				});
				if(bol) {
					uni.setStorageSync('tenantId', code + '');
				} else {
					return this.$mHelper.toast('请输入正确的企业编号!');
				}
				// #ifdef MP-WEIXIN
				this.initWeixinData()
				// #endif
			},
			// 获取微信账号数据
			initWeixinData() {
				//1.获取code，判断是否绑定
				var ctx = this
				uni.login({
					provider: 'weixin',
				  success(res){
						loginBySocial('MINI', res.code).then(res => {
							ctx.$mStore.commit('login', res)
							ctx.$mRouter.reLaunch({ route: '/pages/tabs/profile/index' });
						}).catch(err => {
							if (err.statusCode === 401){
								ctx.loginByPass = false;
							}
						});
				  }
				})
			},
			// 发送验证码并进入倒计时
			getSmsCode() {
				let checkSendCode = this.$mGraceChecker.check(
					this.form,
					this.$mFormRule.sendCodeRule
				);
				if (!checkSendCode) {
					this.$mHelper.toast(this.$mGraceChecker.error);
					return;
				}
				staffPhone(this.form['mobile']).then(res=>{
					if (res.data) {
						this.$mHelper.toast(`验证码发送成功!`);
						this.smsCodeBtnDisabled = true;
						uni.setStorageSync('loginSmsCodeTime', moment().valueOf() / 1000);
						this.handleSmsCodeTime(59);
						console.log(`验证码是${res.data}`)
					} else {
						this.$mHelper.toast(res.msg === '手机号未注册' ? '手机号未绑定账号' : res.msg);
					}
				})
			},
			handleSmsCodeTime(time) {
				let timer = setInterval(() => {
					if (time === 0) {
						clearInterval(timer);
						this.smsCodeBtnDisabled = false;
					} else {
						this.codeSeconds = time;
						this.smsCodeBtnDisabled = true;
						time--;
					}
				}, 1000);
			},
			// 返回上一页
			navBack() {
				this.$mRouter.back();
			},
			// 统一跳转路由
			navTo(route) {
				this.$mRouter.push({ route });
			},
			// 返回主页
			toHome() {
				this.$mRouter.reLaunch({ route: '/pages/tabs/index/index' });
			},
			// 提交表单
			async toLogin() {
				const cheRes = this.$mGraceChecker.check(
					this.form,
					this.$mFormRule.loginByCodeRule
				)
				if (!cheRes) {
					this.$mHelper.toast(this.$mGraceChecker.error);
					return;
				}
				await this.handleLogin(this.form);
			},
			// 登录
			handleLogin(params) {
				this.btnLoading = true;
				loginByMobile(this.form['mobile'], this.form['code']).then(res => {
					this.$mHelper.toast('恭喜您，登录成功！');
					this.$mStore.commit('login', res);
					// #ifdef MP-WEIXIN
					this.setUserBind()
					// #endif
					this.btnLoading = false;
					this.$mRouter.reLaunch({ route: '/pages/tabs/profile/index' });
				})
			},
			// 微信绑定用户
			setUserBind() {
				var ctx = this
				//1.获取code，判断是否绑定
				uni.login({
					provider: 'weixin',
					success(res){
						socialBind('MINI', res.code).then(res => {
							console.log('用户绑定 success!')
						})
					}
				})
			},
		}
	}
</script>
<style lang="scss">
	page {
		background: $color-white;
	}

	.container {
		padding-top: 115px;
		position: relative;
		width: 100vw;
		overflow: hidden;
		background: #fff;
		.wrapper {
			position: relative;
			z-index: 90;
			background: #fff;
			padding-bottom: 40upx;
		}
		.back-btn {
			position: absolute;
			left: 40upx;
			z-index: 9999;
			padding-top: var(--status-bar-height);
			top: 40upx;
			font-size: 40upx;
			color: $font-color-dark;
		}
		.left-top-sign {
			font-size: 120upx;
			color: $page-color-base;
			position: relative;
			left: -16upx;
		}
		.right-top-sign {
			position: absolute;
			top: 80upx;
			right: -30upx;
			z-index: 95;
			&:before,
			&:after {
				display: block;
				content: '';
				width: 400upx;
				height: 80upx;
				background: #b4f3e2;
			}
			&:before {
				transform: rotate(50deg);
				border-radius: 0 50px 0 0;
			}
			&:after {
				position: absolute;
				right: -198upx;
				top: 0;
				transform: rotate(-50deg);
				border-radius: 50px 0 0 0;
				/* background: pink; */
			}
		}

		.left-bottom-sign {
			position: absolute;
			left: -270upx;
			bottom: -320upx;
			border: 100upx solid #d0d1fd;
			border-radius: 50%;
			padding: 180upx;
		}

		.welcome {
			position: relative;
			left: 50upx;
			top: -90upx;
			font-size: 46upx;
			color: #555;
			text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
		}

		.input-content {
			padding: 0 60upx;
		}

		.input-item {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			padding: 0 30upx;
			background: $page-color-light;
			height: 120upx;
			border-radius: 4px;
			margin-bottom: 50upx;
			&:last-child {
				margin-bottom: 0;
			}
			.tit {
				height: 50upx;
				line-height: 56upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
			}
			input {
				height: 60upx;
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				width: 100%;
			}
		}

		.input-item-sms-code {
			position: relative;
			width: 100%;
			.sms-code-btn {
				position: absolute;
				color: #111;
				right: 20upx;
				bottom: 20upx;
				font-size: 28upx;
			}
			.sms-code-resend {
				color: #999;
			}
			.sms-code-btn:after {
				border: none;
				background-color: transparent;
			}
		}

		.forget-section {
			font-size: $font-sm + 2upx;
			color: $font-color-spec;
			text-align: center;
			margin-top: 40upx;
		}

		.register-section {
			margin: 30upx 0 50upx 0;
			width: 100%;
			font-size: $font-sm + 2upx;
			color: $font-color-base;
			text-align: center;

			text {
				color: $font-color-spec;
				margin-left: 10upx;
			}

			text:first-child {
				margin-right: 10upx;
			}
		}

		.btn-group {
			display: flex;
			margin-bottom: 20upx;
		}
	}

	.login-type-2 {
		width: 100%;
		position: relative;

		.back-btn {
			position: absolute;
			left: 40upx;
			z-index: 9999;
			padding-top: var(--status-bar-height);
			top: 40upx;
			font-size: 48upx;
			color: $color-white;
		}

		.login-top {
			height: 460upx;
			position: relative;
			.desc {
				position: absolute;
				top: 200upx;
				left: 40upx;
				font-size: 48upx;
				.title {
					font-size: 48upx;
				}
			}
			.login-pic {
				position: absolute;
				width: 220upx;
				height: 270upx;
				right: 30upx;
				top: 100upx;
			}
		}

		.login-type-content {
			position: relative;
			top: -72upx;
			.login-bg {
				width: 94vw;
				height: 94vw;
				margin: 0 3vw;
			}
			.main {
				width: 94vw;
				position: absolute;
				top: 0;
				left: 3vw;
				.nav-bar {
					display: flex;
					height: 100upx;
					justify-content: center;
					align-items: center;
					position: relative;
					z-index: 10;
					.nav-bar-item {
						flex: 1;
						display: flex;
						height: 100%;
						line-height: 96upx;
						font-size: $font-lg;
						display: flex;
						margin: 0 120upx;
						justify-content: center;
					}
					.nav-bar-item-active {
						border-bottom: 5upx solid;
					}
				}

				.login-type-form {
					width: 80%;
					margin: 50upx auto;
					.input-item {
						position: relative;
						height: 90upx;
						line-height: 90upx;
						margin-bottom: $spacing-lg;
						.iconfont {
							font-size: 50upx;
							position: absolute;
							left: 0;
						}
						.login-type-input {
							height: 90upx;
							padding-left: 80upx;
							border-bottom: 1upx solid rgba(0, 0, 0, .1);
						}
						.sms-code-btn,
						sms-code-resend {
							width: 240upx;
							font-size: $font-base - 2upx;
						}
					}
				}

				.confirm-btn {
					height: 80upx;
					line-height: 80upx;
				}
			}
		}
	}

	.getPhoneNumber{
		width: 100%;
		background: none;
		border: none;
		text-align: left;
		font-size: 30rpx;
		color: #303133;
		padding-left: 0;
		&:after{
			border: none;
		}
		.placeholder{
			color: #999;
		}
	}
</style>
